<script lang='ts' setup>
import { onMounted, onUnmounted, reactive } from 'vue'
import { Dashboard, dashboard } from '@/apis/dashboard.ts'
import { Api } from '@/apis/structs.ts'
import { byte_format } from '@/funcs/byte_format.ts'

declare type s = { loading: boolean, id: NodeJS.Timeout | undefined, dashboard: Dashboard |undefined }
const state = reactive<s>({ loading: true, id: undefined, dashboard: undefined })

onMounted(async () => {
  request().then(async (response: Api<Dashboard>) => {
    state.loading = false
    if (0 === response.code) {
      state.id = setInterval(request, 1000)
    }
  })
})

onUnmounted(async () => {
  clearInterval(state.id)
})

async function request(): Promise<Api<Dashboard>> {
  const response = await dashboard()
  if (0 === response.code) {
    state.dashboard = response.data
  }

  return response
}
</script>

<template>
  <div class='content-wrap'>
    <n-space vertical>
      <n-space :wrap-item='false' align='center' justify='center' size='small'>
        <n-space :size='15' class='block-wrap' vertical>
          <div class='title'>
            <n-text style='color: #FFF'>CPU</n-text>
          </div>
          <n-space :size='15' vertical>
            <template v-if='state.loading'>
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
            </template>
            <template v-else>
              <template v-for='(v, i) in state.dashboard!.cpus' :key='i'>
                <n-space :wrap-item='false' align='center' class='block-item'>
                  <div class='cpu-label'>
                    <n-text>CPU: {{ i }}</n-text>
                  </div>
                  <div style='flex-grow: 1'>
                    <n-progress :percentage='v' :show-indicator='false' status='success' type='line' />
                  </div>
                </n-space>
              </template>
            </template>
          </n-space>
        </n-space>
        <n-space :size='15' :wrap-item='false' class='block-wrap' vertical>
          <div class='title'>
            <n-text style='color: #FFF'>网络</n-text>
          </div>
          <n-space :size='15' vertical>
            <template v-if='state.loading'>
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
              <n-skeleton height='15px' width='100%' />
            </template>
            <template v-else>
              <template v-for='v in state.dashboard!.network' :key='v.name'>
                <n-space :wrap-item='false' align='center' class='block-item'>
                  <div class='network-label'>
                    <n-text>网卡: {{ v.name }}</n-text>
                  </div>
                  <div style='flex-grow: 1'>
                    <n-space>
                      <div class='network-item'>
                        <n-text>↑C {{ byte_format(v.up.current) }}</n-text>
                      </div>
                      <div class='network-item'>
                        <n-text>↑T {{ byte_format(v.up.total) }}</n-text>
                      </div>
                      <div class='network-item'>
                        <n-text>↓C {{ byte_format(v.down.current) }}</n-text>
                      </div>
                      <div class='network-item'>
                        <n-text>↓T {{ byte_format(v.down.total) }}</n-text>
                      </div>
                    </n-space>
                  </div>
                </n-space>
              </template>
            </template>
          </n-space>
        </n-space>
      </n-space>
      <div style='height: 350px;'>
        <n-space vertical>
          <div class='title'>
            <n-text style='color: #FFF'>内存</n-text>
          </div>
          <n-space :size='15' vertical>
            <template v-if='state.loading'>
              <n-skeleton height='15px' width='100%' />
            </template>
            <template v-else>
              <div>
                <n-space :wrap-item='false' align='center' class='block-item'>
                  <div>
                    <n-text>虚拟内存使用率</n-text>
                  </div>
                  <div style='flex-grow: 1'>
                    <n-progress :percentage='state.dashboard!.memory.virtual.used / state.dashboard!.memory.virtual.total * 100' :show-indicator='false' status='success' type='line' />
                  </div>
                  <div>{{ byte_format(state.dashboard!.memory.virtual.used) }}/{{ byte_format(state.dashboard!.memory.virtual.total) }}</div>
                </n-space>
                <n-space :wrap-item='false' align='center' class='block-item'>
                  <div>
                    <n-text>交换内存使用率</n-text>
                  </div>
                  <div style='flex-grow: 1'>
                    <n-progress :percentage='state.dashboard!.memory.swap.used / state.dashboard!.memory.swap.total * 100' :show-indicator='false' status='success' type='line' />
                  </div>
                  <div>{{ byte_format(state.dashboard!.memory.swap.used) }}/{{ byte_format(state.dashboard!.memory.swap.total) }}</div>
                </n-space>
              </div>
            </template>
          </n-space>
        </n-space>
      </div>
      <div>
        <n-space vertical>
          <div class='title'>
            <n-text style='color: #FFF'>磁盘</n-text>
          </div>
          <n-space :size='15' vertical>
            <template v-if='state.loading'>
              <n-skeleton height='15px' width='100%' />
            </template>
            <template v-else>
              <n-space vertical>
                <n-space :wrap-item='false' align='center' class='block-item'>
                  <div>
                    <n-text>磁盘使用率</n-text>
                  </div>
                  <div style='flex-grow: 1'>
                    <n-progress :percentage='state.dashboard!.disk.usage.used / state.dashboard!.disk.usage.total * 100' :show-indicator='false' status='success' type='line' />
                  </div>
                  <div>{{ byte_format(state.dashboard!.disk.usage.used) }}/{{ byte_format(state.dashboard!.disk.usage.total) }}</div>
                </n-space>
              </n-space>
            </template>
          </n-space>
        </n-space>
      </div>
    </n-space>
  </div>
</template>

<style scoped>
.block-wrap {
  flex-grow: 1;
  height: 350px;
  width: 45px;
}

.block-item {
  height: 35px;
}

.title {
  line-height: 2;
  background-color: #2E4053;
  color: #FFFFFF;
  padding-left: 15px;
}

.cpu-label {
  width: 50px;
}

.network-label {
  width: 120px;
}

.network-item {
  width: 150px;
}
</style>
